<template>
  <div>
    <h1 class="title">{{ $t("Register") }}</h1>
    <h3 class="sub-title">{{ $t("Register-desc") }}</h3>
    <div class="form-container">
      <el-form
        :model="form"
        label-width="80px"
        size="large"
        ref="formRef"
        :rules="rules"
      >
        <el-form-item :label="`${$t('username')}:`" prop="username" required>
          <el-input v-model="form.username" />
        </el-form-item>
        <el-form-item :label="`${$t('password')}:`" prop="password" required>
          <el-input v-model="form.password" type="password" show-password />
        </el-form-item>
        <el-form-item
          :label="`${$t('Confirm password')}:`"
          prop="rePassword"
          required
        >
          <el-input v-model="form.rePassword" type="password" show-password />
        </el-form-item>
      </el-form>
      <el-form-item>
        <el-button
          type="primary"
          round
          size="large"
          @click="handleRegister(formRef)"
          style="width: calc(100% - 80px); margin-left: 80px"
          >{{ $t("register") }}</el-button
        >
      </el-form-item>
      <div class="bottom-container" style="margin-left: 80px">
        <span>{{ $t("Existing account?") }}&nbsp;</span>
        <el-button type="text" @click="$emit('changeState', true)"
          >去登录</el-button
        >
      </div>
    </div>
  </div>
</template>
<script setup>
import useUserStore from "@s/user.js";
import { reactive, ref } from "vue";
const emit = defineEmits(["changeState"]);
const formRef = ref(null);
const user = useUserStore();

const form = reactive({
  username: "",
  password: "",
  rePassword: "",
});
const rules = reactive({
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 4, max: 16, message: "用户名长度4~16", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 4, max: 16, message: "密码长度4~16", trigger: "blur" },
  ],
  rePassword: [
    {
      validator: (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请再次输入密码"));
        } else if (value !== form.password) {
          callback(new Error("两次密码不一致！"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
});
const handleRegister = async (ref) => {
  if (!ref) return;
  await ref.validate(async (valid, fields) => {
    if (valid) {
      const data = await user.handleRegister(form);
      $elMessage({
        message: "注册成功",
        type: "success",
        duration: 3 * 1000,
      });
      emit("changeState", true);
    } else {
      console.log("error submit!", fields);
    }
  });
};
</script>
<style scoped lang="scss">
.login-right {
  color: #5794ff;

  .title {
    margin-top: 20px;
    margin-bottom: 0px;
  }
  .sub-title {
    margin-top: 10px;
    color: #999999;
    font-weight: 400;
  }
  .form-container {
    flex: 1;
    width: 80%;
    padding: 30px 0;
  }
  .bottom-container {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--el-font-size-base);
    color: #999999;
  }
}
</style>